-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Fix: DOMLayoutDelegate miscalculates item & visible rects #8696
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
Hey, we were testing this today and ran into some issues. I'm not entirely sure if this is what we should be testing, but we went to https://reactspectrum.blob.core.windows.net/reactspectrum/2c45388fdb4783f47e3f0d47112f89c90aafdc19/storybook/index.html?path=/story/react-aria-components-listbox--virtualized-list-box-grid&providerSwitcher-express=false We added a 30px border to the virtualizer div Can you clarify what this PR is addressing. What was broken and what it's fixing, as well as how to test it. Possibly adding a story could help. Thanks!! |
|
@snowystinger I'm confused, this change is in Otherwise, to give you more context on this change, it circles back to the pending RFC, which unfortunately is taking way longer to write up than I expected. I won't go much further into detail here, since it will become clear once that's PR'd, but essentially I'm using this delegate to scroll a "random access" item target rect to its scroll snap alignment - when the border is included, it causes target offsets not to lign up with visual position. PS: Also noticed lately that contentSize should be diffed from first and last item instead of simply taking scrollWidth, in case scroll container is larger than content. |
|
Apologies, it was a lot of delegates to follow around. Manually adding |
A Scrollport coincides with the padding box, which should not include border offset. We were calculating on
offsetWidth& bounding boxes instead ofclientWidthand for some reason shifted the item rect by scroll offset??With this change, the DOM layout is now consistent with our virtualized ones 👍
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: